<script setup>
    import {useCartStore} from '@/stores/cartStore'
    import { storeToRefs } from 'pinia';
    const { totalPrice, totalCount, isAll, selectedCount, selectedPrice} = storeToRefs(useCartStore())
    const {goodcheck, allcheck, delCart, cartList, } = useCartStore()
    console.log(cartList);

    // 单选
    function change(selected, skuId) {
        // 无法知道修改谁的选中状态，需要额外参数skuId
        // console.log(selected, skuId);
        goodcheck(selected, skuId)
    }

    function allcheck2(selected) {
        allcheck(selected)
    }

</script>


<template>
  <div class="cart-page">
    <div class="container">
        <div class="cart">
            <table>
                <thead>
                    <tr>
                        <th width="120">
                            <el-checkbox :model-value="isAll" @update:model-value="allcheck2"></el-checkbox>
                        </th>
                        <th width="400">商品信息</th>
                        <th width="220">单价</th>
                        <th width="180">数量</th>
                        <th width="180">小计</th>
                        <th width="140">操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="item in cartList" :key="item.skuId">
                        <td>
                            <el-checkbox :model-value="item.selected" @update:modelValue="change($event, item.skuId)"></el-checkbox>
                        </td>
                        <td>
                            <div class="goods">
                                <a href="javascript:;"><img :src="item.picture" alt=""></a>
                                <p class="name ellipsis">{{item.name}}</p>
                            </div>
                        </td>
                        <td class="tc">
                            <span>{{item.price}}</span>
                        </td>
                        <td class="tc">
                            <el-input-number v-model="item.count" :min="1"></el-input-number>
                        </td>
                        <td class="tc">
                            <span class="red">{{(item.price * item.count).toFixed(2)}}</span>
                        </td>
                        <td class="tc">
                            <a href="javascript:;" @click="delCart(item.skuId)">删除</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <!-- 操作 -->
        {{ cartList }}
        <div class="manipulate">
            <div class="batch">
                共 {{ totalCount }} 件商品，已选择 {{selectedCount}} 件，商品合计：
                <span>¥ {{(selectedPrice).toFixed(2)}}</span> 
            </div>
            <div class="total">
                <el-button  type="primary" size="large" @click="$router.push('/layout/checkout')">下单结算</el-button>
            </div>
        </div>
    </div>
  </div>
</template>


<style scoped lang='scss'>
    .cart-page{
        margin-top: 20px;
        .cart{
            color: #666;
            background: #fff;
            table{
                th,td{
                    padding: 10px;
                    border-bottom: 1px solid #f5f5f5;
                    &:first-child{
                        text-align: left;
                        padding-left: 30px;
                    }
                }
                th{
                    font-weight: normal;
                    font-size: 16px;
                    line-height: 50px;
                }
                .tc{
                    text-align: center;
                    .red{
                        color: $priceColor;
                        font-size: 16px;
                    }
                    a{
                        color: $xtxColor;
                    }
                }
                .goods{
                    display: flex;
                    align-items: center;
                    .name{
                        font-size: 16px;
                        padding-left: 10px;
                    }
                    img{
                        width: 100px;
                        height: 100px;
                    }
                }
            }
        }
        .manipulate{
            display: flex;
            height: 80px;
            align-items: center;
            padding: 0 30px;
            justify-content: space-between;
            background: #fff;
            margin-top: 20px;
            font-size: 16px;
            .batch{
                span{
                    font-size: 18px;
                    font-weight: bold;
                    color: $priceColor;
                }
            }
        }
    }
</style>